<template>
  <section class="legal-person">
    <DivShell title="法人信息">
      <div class="container">
        <div>
          <p>
            <label>法人总数</label>
            <span>{{communityData.farenTotal}}</span>
          </p>
        </div>
        <div>
          <div class="content">
            <p>
              <label>企业单位</label>
              <span>
                <span>{{communityData.aoiStatist.enterprise}}</span>
                <em>{{Math.round((communityData.aoiStatist.enterprise/communityData.farenTotal)*100)}}%</em>
              </span>
            </p>
            <p>
              <label>个体工商户</label>
              <span>
                <span>{{communityData.aoiStatist.indBusiness}}</span>
                <em>{{Math.round((communityData.aoiStatist.indBusiness/communityData.farenTotal)*100)}}%</em>
              </span>
            </p>
          </div>
          <div class="chart">
            <CircleProgress
            :key="reFresh"
              id="legalCircle"
              :width="60*desgin1pxToCilent"
              :radius="4*desgin1pxToCilent"
              :progress="(communityData.aoiStatist.enterprise/communityData.farenTotal)*100"
              :delay="200"
              :duration="1000"
              barColor="#4AEBE2"
              backgroundColor="#307FFF"
              :isRound="true"
              :isAnimation="true"
              timeFunction="cubic-bezier(0.99, 0.01, 0.22, 0.94)"
            />
            <div class="bg"></div>
          </div>
        </div>
      </div>
    </DivShell>
  </section>
</template>

<script>
import { mapGetters } from 'vuex'
import DivShell from '@src/components/divShell.vue'
import CircleProgress from '@src/components/circle-progress.vue'
export default {
  name: "LegalPerson",
  components:{
    DivShell,
    CircleProgress
  },
  props: {
    title:{
      type: String,
      default:'丰图精准决策数字底板'
    }
  },
  data() {
    return {
      reFresh:1,
    };
  },
  computed: {
    ...mapGetters(['communityData']),
  },
  watch:{
    communityData: {
      handler(cval, oval) {
        ++this.reFresh
      },
      deep: true
    }
  },
  mounted() {
     
  },
  methods: {
    
  },
  beforeDestroy() {
      
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .legal-person{
    margin-bottom: 18px;
    & .container{
      &>div{
        padding-left: 49px;
        padding-right: 17px;
        box-sizing: border-box;
        &:nth-of-type(1){
          height: 34px;
          line-height: 34px;
          display: flex;
          justify-content: space-between;
          background: url('../../../assets/img/legal-total.png') 4px center no-repeat;
          background-size: 28px 28px;
          & label{
            color: #B3BBD4;
            font-size: 14px;
            margin-right: 16.5px;
          }
          & span{
            color: #B3BBD4;
            font-size: 16px;
            background: linear-gradient(to right,#03DCEF,#307FFF);
            -webkit-background-clip:text;
            color: transparent;
          }
        }
        &:nth-last-of-type(1){
          display: flex;
          padding-right: 0;
          & .content{
            flex:1;
            margin-right: 40px;
            &>p{
              display: flex;
              height: 34px;
              line-height: 34px;
              & label{
                font-size: 14px;
                color: #707DA4;
                width: 110px;
              }
              &>span{
                font-size: 16px;
                color: #9CA7C7;
                display: flex;
                justify-content: space-between;
                flex: 1;
              }
              & em{
                font-size: 16px;
                color: #4AEBE2;
              }
              &:nth-last-of-type(1) em{
                color: #307FFF;
              }
            }
          }
          & .chart{
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            &>.bg{
              position: absolute;
              top: 0;
              right: 0;
              left: 0;
              bottom:0;
              margin: auto;
              width: 38px;
              height: 38px;
              border-radius: 50%;
              border:3px solid rgb(33,51,101);
              background: url('../../../assets/img/legal-person.png') center center no-repeat;
              background-size: 23px 26px;
            }
          }
        }
      }
    }
  }
</style>
